<template>
  <div>
    <div class="title-box">
      <div class="title-head">购买邮件</div>
      <div class="title-hint">
        <span class="title-hint-num">0</span>
        <span class="title-hint-type">已发送</span>
      </div>
      <div class="title-hint">
        <span class="title-hint-num">1000</span>
        <span class="title-hint-type">封剩</span>
      </div>
    </div>
    <div class="sliderBox">
      <el-slider v-model="valueNum" :step="1000" :max="200000" show-input/>
    </div>
    <div class="parameter">
      <span class="parameter-info">单价：</span>
      <span class="price">{{ unitPrice }}</span>
      <span>元/千封</span>
    </div>
    <div class="parameter">
      <span class="parameter-info">数量：</span>
      <span class="price">{{ valueNum }}</span>
      <span>封</span>
    </div>
    <div class="parameter">
      <span class="parameter-info">费用：</span>
      <span class="price">{{ cost }}</span>
      <span>元</span>
    </div>
    <el-button type="primary">立即支付</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      valueNum: 0,
      unitPrice: 5
    }
  },
  computed: {
    cost() {
      return this.valueNum * (this.unitPrice * 0.001)
    }
  }
}
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff0f5;
  border-bottom: 1px solid #eee;
  .title-head {
    font-size: 14px;
  }
  .title-hint {
    margin-left: 20px;
    font-size: 12px;
    .title-hint-num {
      color: #1cbdef;
    }
    .title-hint-type {
      color: #3b3b3b;
    }
  }
}
.sliderBox {
  width: 60%;
  margin: 20px 0 20px 10px;
}
.parameter {
  color: #666;
  margin-bottom: 20px;
  .parameter-info {
  color: #2E2E2E;
  }
  .price {
    margin: 0 10px
  }
}
</style>
